<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 14 - Masking</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>

    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);

    stage.interactive = true;

    var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
    bg.anchor.x = 0.5;
    bg.anchor.y = 0.5;

    bg.position.x = 620/2;
    bg.position.y = 380/2;

    stage.addChild(bg);

    var container = new PIXI.DisplayObjectContainer();
    container.position.x = 620/2;
    container.position.y = 380/2;

    var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
    bgFront.anchor.x = 0.5;
    bgFront.anchor.y = 0.5;

    container.addChild(bgFront);

    var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
    light2.anchor.x = 0.5;
    light2.anchor.y = 0.5;
    container.addChild(light2);

    var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
    light1.anchor.x = 0.5;
    light1.anchor.y = 0.5;
    container.addChild(light1);

    var panda =  PIXI.Sprite.fromImage("panda.png");
    panda.anchor.x = 0.5;
    panda.anchor.y = 0.5;

    container.addChild(panda);

    stage.addChild(container);


    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(620, 380);

    // set the canvas width and height to fill the screen
//    renderer.view.style.width = window.innerWidth + "px";
    //renderer.view.style.height = window.innerHeight + "px";
    renderer.view.style.position = "absolute"
    renderer.view.style.marginLeft = "-310px";
    renderer.view.style.marginTop = "-190px";
    renderer.view.style.top = "50%";
    renderer.view.style.left = "50%";
    renderer.view.style.display = "block";
    // add render view to DOM
    document.body.appendChild(renderer.view);



    // lets create moving shape
    var thing = new PIXI.Graphics();
    stage.addChild(thing);
    thing.position.x = 620/2;
    thing.position.y = 380/2;
    thing.lineStyle(0);

    container.addFilter(thing);

    var count = 0;

    stage.click = stage.tap = function()
    {
        if(!container.filter)
        {
            container.addFilter(thing);

            PIXI.runList(stage);
        }
        else
        {
            container.removeFilter(thing);
        }
    }

    /*
     * Add a pixi Logo!
     */
    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);

    logo.anchor.x = 1;
    logo.position.x = 620
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = 320
    logo.interactive = true;
    logo.buttonMode = true;

    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }

    var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
    help.position.y = 350;
    help.position.x = 10;
    stage.addChild(help);

    requestAnimFrame(animate);

    function animate() {

    //    thing.clear();
        bg.rotation += 0.01;
        bgFront.rotation -= 0.01;


        light1.rotation += 0.02;
        light2.rotation += 0.01;

        panda.scale.x = 1 + Math.sin(count) * 0.04;
        panda.scale.y = 1 + Math.cos(count) * 0.04;

        count += 0.1;

        thing.clear();
        thing.lineStyle(5, 0x16f1ff, 1);
        thing.beginFill(0x8bc5ff, 0.4);
        thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
        thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
        thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
        thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
        thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
        thing.rotation = count * 0.1;

        renderer.render(stage);
        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>
